<template>
  <div class="console">
    <n-grid cols="1 s:2 m:3 l:4 xl:4 2xl:4" responsive="screen" :x-gap="12" :y-gap="8">
      <n-grid-item>
        <n-card size="small" :bordered="false" hoverable>
          <n-space justify="space-between" align="center">
            <div>
              <img src="~@/assets/images/sale.svg" class="top-card-img" style="display: inline-block; margin-top: -2px;" />
              <div class="pt-2" style="display: inline-block; margin-left: 6px;">代理商佣金</div>
            </div>
            <n-select size="medium" style="width: 100px;" :options="dlsoptions" @update:value="dlsUpdate" clearable></n-select>
          </n-space>
          <n-space justify="space-between" align="center">
            <n-h1 class="mb-0" v-if="dlsData.dlsattr == '' || dlsData.dlsattr == 'null'">￥{{dlsData.agent_money}}</n-h1>
            <n-h1 class="mb-0" v-else-if="dlsData.dlsattr == '1'">￥{{dlsData.agent_ytxmoney}}</n-h1>
            <n-h1 class="mb-0" v-else-if="dlsData.dlsattr == '2'">￥{{dlsData.agent_wtxmoney}}</n-h1>
          </n-space>
        </n-card>
      </n-grid-item>
      <n-grid-item>
        <n-card size="small" :bordered="false" hoverable>
          <n-space justify="space-between" align="center">
            <div>
              <img src="~@/assets/images/sale.svg" class="top-card-img" style="display: inline-block; margin-top: -2px;" />
              <div class="pt-2" style="display: inline-block; margin-left: 6px;">商户佣金</div>
            </div>
            <n-select size="medium" style="width: 100px;" :options="dlsoptions" @update:value="shUpdate" clearable></n-select>
          </n-space>
          <n-space justify="space-between" align="center">
            <n-h1 class="mb-0" v-if="dlsData.shattr == '' || dlsData.shattr == 'null'">￥{{dlsData.bussiness_money}}</n-h1>
            <n-h1 class="mb-0" v-else-if="dlsData.shattr == '1'">￥{{dlsData.bussiness_ytxmoney}}</n-h1>
            <n-h1 class="mb-0" v-else-if="dlsData.shattr == '2'">￥{{dlsData.bussiness_wtxmoney}}</n-h1>
          </n-space>
        </n-card>
      </n-grid-item>
      <n-grid-item>
        <n-card size="small" :bordered="false" hoverable>
          <n-space justify="space-between" align="center">
            <div>
              <img src="~@/assets/images/order_count.svg" class="top-card-img" style="display: inline-block; margin-top: -2px;" />
              <div class="pt-2" style="display: inline-block; margin-left: 6px;">门店</div>
            </div>
            <n-select size="medium" style="width: 100px;" :options="stationoptions" @update:value="stationUpdate" clearable></n-select>
          </n-space>
          <n-space justify="space-between" align="center">
            <n-h1 class="mb-0" v-if="stationData.attr == '' || stationData.attr == 'null'">{{stationData.station}}个</n-h1>
            <n-h1 class="mb-0" v-else-if="stationData.attr == '1'">{{stationData.erlustation}}个</n-h1>
            <n-h1 class="mb-0" v-else-if="stationData.attr == '2'">{{stationData.silustation}}个</n-h1>
            <n-h1 class="mb-0" v-else-if="stationData.attr == '3'">{{stationData.pingtaistation}}个</n-h1>
          </n-space>
        </n-card>
      </n-grid-item>
      <n-grid-item>
        <n-card size="small" :bordered="false" hoverable>
          <n-space justify="space-between" align="center">
            <div>
              <img src="~@/assets/images/volume.svg" class="top-card-img" style="display: inline-block; margin-top: -2px;"/>
              <div class="pt-2" style="display: inline-block; margin-left: 6px;">设备</div>
            </div>
            <n-select size="medium" style="width: 100px;" v-model="dlsData.stationmoren" :options="chargeroptions" @update:value="chargerUpdate" clearable></n-select>
          </n-space>
          <n-space justify="space-between" align="center">
            <n-h1 class="mb-0" v-if="chargerData.attr == '' || chargerData.attr == 'null'">{{chargerData.charger}}台</n-h1>
            <n-h1 class="mb-0" v-else-if="chargerData.attr == '1'">{{chargerData.zxcharger}}台</n-h1>
            <n-h1 class="mb-0" v-else-if="chargerData.attr == '2'">{{chargerData.lxcharger}}台</n-h1>
          </n-space>
        </n-card>
      </n-grid-item>
    </n-grid>

    <n-grid cols="1 s:1 m:2 l:2 xl:2 2xl:2" responsive="screen" :x-gap="12" :y-gap="8" class="mt-3">
      <n-grid-item>
        <n-card
          size="small"
          title="佣金"
          :segmented="{ content: true }"
          :bordered="false"
          hoverable
        >
          <Percent />
        </n-card>
      </n-grid-item>
      <n-grid-item>
        <n-card
          size="small"
          title="问题反馈"
          :segmented="{ content: true }"
          :bordered="false"
          hoverable
        >
          <VisitSource />
        </n-card>
      </n-grid-item>
    </n-grid>
  </div>
</template>

<script lang="ts" setup>
  import VisitSource from './components/VisitSource.vue';
  import Percent from './components/Percent.vue';
  import { ref,onMounted } from 'vue';
  import { moneytongji,stationtongji,chargertongji } from '@/api/tongji/index';

  // 统计
  const dlsData = ref({
    agent_money: 0,
    agent_ytxmoney: 0,
    agent_wtxmoney: 0,
    bussiness_money: 0,
    bussiness_ytxmoney: 0,
    bussiness_wtxmoney: 0,
    dlsattr: '',
    shattr: '',
    stationmoren: '在线设备',
  });

  const dlsoptions = ref([
    {
      label: "已提现",
      value: 1,
    }, {
      label: '未提现',
      value: 2
    }
  ])
  function dlsUpdate(value: string){
    let attr = JSON.stringify(value);
    dlsData.value.dlsattr = attr;
  }
  function shUpdate(value: string){
    let attr = JSON.stringify(value);
    dlsData.value.shattr = attr;
  }

  // 门店统计
  const stationData = ref({
    station: 0,
    erlustation: 0,
    silustation: 0,
    attr: '',
  });

  const stationoptions = ref([
    {
      label: "代理商",
      value: 1,
    }, {
      label: '员工',
      value: 2
    }, {
      label: '平台',
      value: 3
    }
  ])
  function stationUpdate(value: string){
    let attr = JSON.stringify(value);
    stationData.value.attr = attr;
  }

  // 设备统计
  const chargerData = ref({
    charger: 0,
    zxcharger: 0,
    lxcharger: 0,
    attr: '',
  });

  const chargeroptions = ref([
    {
      label: "在线设备",
      value: 1,
    }, {
      label: '离线设备',
      value: 2
    }
  ])
  function chargerUpdate(value: string){
    let attr = JSON.stringify(value);
    chargerData.value.attr = attr;
  }

  onMounted(async () => {
    moneytongji({}).then((res) => {
      dlsData.value = res;
    });

    stationtongji({}).then((res) => {
      stationData.value = res;
    });

    chargertongji({}).then((res) => {
      chargerData.value = res;
    });
  });

</script>

<style lang="less" scoped>
  .top-card-img {
    width: 32px;
    margin-left: 5px;
  }
</style>
